<template>
    <div class="user-area page-container">
        <el-row class="user-area_row header">
            <span class="text">区域</span>
            <i class="el-icon-question"></i>
        </el-row>
        <el-row class="user-area_row user-area_row--filter" type="flex">
            <el-radio
                    class="filter-item"
                    v-for="{label, value} in dateOption"
                    v-model="dateRange"
                    :key="value"
                    :label="value"
                    @change="handleDateChange"
                    border>
                {{label}}
            </el-radio>
            <el-date-picker
                    v-show="showDateRangePicker"
                    class="filter-item"
                    v-model="queryParameter.dateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :clearable="false"
                    :value-format="dateFormat">
            </el-date-picker>
        </el-row>
        <el-row class="user-area_row user-area_row--key-indicator">
            <el-card class="box-card">
                <el-row type="flex" justify="space-between" align="middle" slot="header">
                    <span class="title">关键指标</span>
                </el-row>
                <div class="card-content">
                    <el-tag type="info">地域分布</el-tag>
                    <div v-auto-resize class="chart-wrap map" ref="chartEl" style="height: 28vh"/>
                </div>
            </el-card>
        </el-row>
        <el-row class="user-area_row user-area_row--key-indicator">
            <el-card class="box-card">
                <el-row type="flex" justify="space-between" align="middle" slot="header">
                    <span class="title">详细数据</span>
                </el-row>
                <div class="card-content">
                    <TableSimple :tableData="tableData" />
                    <el-pagination
                            background
                            :current-page.sync="currentPage"
                            :page-size="100"
                            layout="prev, pager, next, jumper"
                            :total="1000">
                    </el-pagination>
                </div>

            </el-card>
        </el-row>
    </div>
</template>

<script>
import EchartsBase from '@/mixins/echarts-base'
import AutoResize from '@/directive/echart-resizer'
import { commonMixin } from '@/mixins/user-analysis'
import axios from 'axios'
import echarts from 'echarts'

let oChart
let geoJson, GeoCoordMap, distributeArr
export default {
  name: 'UserArea',
  components: {},
  mixins: [EchartsBase, commonMixin],
  directives: {
    AutoResize
  },
  data () {
    return {
      tableData: {
        column: [
          {
            label: '省市',
            prop: 'date'
          },
          {
            label: '浏览量PV',
            prop: 'pv'
          },
          {
            label: '独立用户UV',
            prop: 'uv'
          },
          {
            label: '访问次数VV',
            prop: 'vv'
          },
          {
            label: '独立IP',
            prop: 'ip'
          },
          {
            label: '历史趋势',
            prop: 'ipss'
          }
        ],
        data: [
          {
            date: '2016-05-02',
            pv: '王小虎',
            uv: '王小虎',
            vv: '114',
            out: '王小虎',
            online: '王小虎',
            ip: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-02',
            pv: '王小虎',
            uv: '王小虎',
            vv: '114',
            out: '王小虎',
            online: '王小虎',
            ip: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-02',
            pv: '王小虎',
            uv: '王小虎',
            vv: '114',
            out: '王小虎',
            online: '王小虎',
            ip: '上海市普陀区金沙江路 1518 弄'
          }
        ]
      }
    }
  },
  created () {
    Promise.all([axios.get('./geo-json/100000.json')])
      .then(([{ data: geoData }]) => {
        geoJson = geoData
        echarts.registerMap('CHINA', geoJson)
        this.$nextTick().then(() => {
          oChart = echarts.init(this.$refs.chartEl)
          this.setOption()
        })
      })
  },
  methods: {
    setOption () {
      const geoCoordMap = this.constructGeoCoordMap()

      const convertData = (data = []) => {
        const res = []
        for (const item of data) {
          const { provinceName } = item
          let sum = 0
          let geoCoord = []
          for (const key of this.checkedType) {
            sum += (item[key] || 0)
          }
          if (geoCoordMap.has(provinceName)) {
            geoCoord = geoCoordMap.get(provinceName)
          } else {
            for (const key of geoCoordMap.keys()) {
              if (provinceName.indexOf(key) >= 0) {
                geoCoord = geoCoordMap.get(key)
                geoCoordMap.delete(key)
                geoCoordMap.set(provinceName, geoCoord)
                break
              }
            }
          }
          sum && res.push(geoCoord.concat(...[sum, provinceName]))
        }
        // console.log(res)
        return res
      }

      const option = {
        tooltip: {
          trigger: 'item'
        },
        visualMap: {
          type: 'continuous',
          right: '1%',
          dimension: 2,
          orient: 'horizontal',
          text: ['高', '低'],
          splitNumber: 5,
          color: ['#d94e5d', '#eac736', '#50a3ba'],
          textStyle: {
            color: '#000'
          }
        },
        geo: {
          map: 'CHINA',
          top: '2%',
          bottom: '2%',
          label: {
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#323c48',
              borderColor: '#111'
            },
            emphasis: {
              areaColor: '#2a333d'
            }
          },
          roam: true
        },
        series: [
          {
            name: 'data',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbolSize: 12,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              emphasis: {
                borderColor: '#fff',
                borderWidth: 1
              }
            },
            data: convertData(distributeArr),
            tooltip: {
              formatter: ({ value: [x, y, val, pro] }) => `${pro}：${val}`
            }
          }
        ]
      }
      oChart.setOption(option)
    },
    constructGeoCoordMap () {
      if (GeoCoordMap) {
        return GeoCoordMap
      }
      const geoArr = []
      const { features } = geoJson
      for (let i = 0; i < features.length; i++) {
        const { properties: { cp, name } } = features[i]
        geoArr.push([name, cp])
      }
      GeoCoordMap = new Map(geoArr)
      return GeoCoordMap
    }
  }
}
</script>

<style lang="scss" scoped>
    @import "~element-theme-chalk/src/common/var.scss";
    @import "@/assets/scss/modules/variables-module.scss";
    @import "@/assets/scss/modules/common-module.scss";

    .page-container {
        .header {
            font-size: 150%;
            .text {
                font-weight: bold;
            }
            .el-icon-question {
                margin-left: $gap-default;
                color: $--color-text-placeholder;
            }
        }

        .user-area_row {
            & ~ .user-area_row {
                margin-top: $gap-big;
            }

            .box-card {
                & + .box-card {
                    margin-top: 0;
                    margin-left: $gap-default;
                }

                .title {
                    font-weight: bolder;
                    font-size: 145%;
                }
                .card-content {
                    position: relative;
                }
            }
        }

        .user-area_row--filter {
            @include filter-row;
        }

        .user-area_row--key-indicator {
            .el-tag {
                position: absolute;
                left: 2%;
                color: $--color-text-primary;
                font-weight: bold;
            }
        }
    }
</style>
